<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>礼品仓库</el-breadcrumb-item>
      <el-breadcrumb-item>使用详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 表格头部 -->
      <el-row>
        <el-col :span="18" style="text-align: center">
          <!-- 日期筛选 -->
          <el-date-picker
            v-model="querInfo.date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <el-select
            v-model="querInfo.isme"
            placeholder="我的申请"
            style="width: 120px"
          >
            <el-option v-for="item in apply" :value="item"></el-option>
          </el-select>
          <el-button icon="el-icon-search" @click="getBtn"></el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table
        stripe
        :data="applielist"
        width="100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="使用时间" width="150">
          <template v-slot="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              new Date(scope.row.saveDate)
                .toLocaleString('chinese', { hour12: false })
                .substring(5)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="giftName"
          label="礼品名称"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="use"
          label="使用数量"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="phoneNum"
          label="号码"
          width="180"
        ></el-table-column>
        <el-table-column></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { Notification } from 'element-ui'
export default {
  data() {
    return {
      // 申请表格数据
      applielist: [],
      //   筛选
      querInfo: {
        isme: '我的使用',
      },
      apply: ['我的使用', '下级使用'],
    }
  },
  created() {
    this.getUseGift()
  },
  methods: {
    getBtn() {
      if (this.querInfo.isme == '我的使用') {
        this.getUseGift()
      } else if (this.querInfo.isme == '下级使用') {
        this.otherUseGift()
      }
    },
    async getUseGift() {
      const { data: res } = await this.$http.post(
        '/hx/getustgift',
        this.querInfo
      )
      if (res.meta.status !== 200) {
        Notification.error({
          title: '提示',
          message: res.meta.msg,
          position: 'top-left',
        })
      }
      this.applielist = res.data
    },
    async otherUseGift() {
      const { data: res } = await this.$http.post(
        '/hx/otherustgift',
        this.querInfo
      )
      if (res.meta.status !== 200) {
        Notification.error({
          title: '提示',
          message: res.meta.msg,
          position: 'top-left',
        })
      }
      this.applielist = res.data
    },
  },
}
</script>

<style lang="less" scope>
</style>